import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('装饰容器'),
        ),
        body: Column(
          children: [
            BoxDecorationWidget(),
            SizedBox(height: 10.0),
            ShapeDecorationWidget(),
            SizedBox(height: 10.0),
            UnderlineWidget(),
          ],
        ),
      ),
    );
  }
}

// 颜色渐变、圆角矩形
class BoxDecorationWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      position: DecorationPosition.background, // 装饰的位置，此处为背景
      decoration: BoxDecoration(
          // gradient: LinearGradient(colors: [Colors.blue, Colors.redAccent]),
          borderRadius: BorderRadius.circular(12.0)),
      child: Text('HelloWorld'),
    );
  }
}

// 添加边框装饰
class ShapeDecorationWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
        child: Text('边框'),
        // 边框容器支持叠加
        decoration: ShapeDecoration(
            shape: Border.all(color: Colors.redAccent, width: 1.0) +
                Border.all(color: Colors.blue, width: 5.0)));
  }
}

// 添加下划线
class UnderlineWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      child: Text('下划线'),
      decoration: UnderlineTabIndicator(
          borderSide: BorderSide(
              color: Colors.redAccent, width: 4.0, style: BorderStyle.solid)),
    );
  }
}
